<template>
    <div class="search_box" v-show="props.isshow"> 
        <div class="search_header">
            <span>文章搜索</span>
            <span style="background-color: red;"
            @click="handelisshow"
            >关闭</span>
        </div>
        <div class="search_input">
            <input type="text" v-model="val"> <button @click="handelsearch">搜索</button>
        </div>

        <div>
            <div style="padding: 10px 30px;cursor: pointer;" v-for="(item,ind) in searchList" :key="ind"
            @click="()=>hantodetail(item.id)"
            >{{ item.title }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {defineProps,ref,defineEmits} from "vue"
    import {usesearchs} from "../store/searchs"
    import {storeToRefs} from "pinia"
    import { useRouter } from "vue-router";
    let emits = defineEmits(['handelisshow'])
    let props = defineProps({
        isshow:{
            type:Boolean,
            default:false
        }
    })
    let searchs = usesearchs();
    const handelisshow = () =>{
            emits("handelisshow",!props.isshow)
    }
    let val = ref("");
    let {searchList} = storeToRefs(searchs)
    let router = useRouter()
    //模糊搜索
    const handelsearch = () =>{
        let obj = {
            keyword:val.value
        }
        searchs.getSearchs(obj)
        
    }
    //跳转详情
    const hantodetail = (id:string) =>{
       
        router.push("/archives/"+id)
        handelisshow()
        searchList.value = [];
    }
</script>
<style lang="scss">
.search_box{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    border: 1px solid #000;
    .search_header{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 35px;
        align-items: center;
        span{
            border: 1px solid #999;
            padding: 3px 5px;
            cursor: pointer;
        }
    }
    .search_input{
        width: 100%;
        height: 80px;
        padding: 5px 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        input{
            width: 80%;
            height: 80%;
            border: none;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 10px;
            font-size: 16px;
            text-indent: 2rem;
        }
        button{
            margin: 0 10px;
            padding: 10px 20px;
            border: none;
            border: 1px solid #ccc;
            outline: none;
            background: skyblue;
            border-radius: 15px;
        }
    }
}
</style>